import React, { useEffect } from 'react';
import {connect, useDispatch, useStore} from 'react-redux';
import {async_count, incerment, initFunc} from '@/store/actions/count_action';
import store from "../../store/store";
import {Button} from "antd";
 function Count(props:Object) {


    const dispatch = useDispatch();
    useEffect(()=>{
        console.log("count test")
        console.log(store)
        console.log(props)
        console.log(store.getState())
        // @ts-ignore
        store.dispatch(initFunc)

    },[]);
    let age=30;
    const setCount=(parm:number)=>{
        // @ts-ignore
      //store.dispatch(async_count());
      props.async_count();
    };
    const prints=(var1:number)=>{
      console.log(var1)
      console.log(age)
     //@ts-ignore
     props.incerment();
      store.dispatch({type:"incerment",data:20});
  }

    // @ts-ignore
  return (
        <div>
          {/*// @ts-ignore*/}
            <div>Count组件props:{props.count}</div>
            <div>Count组件store{store.getState().countReducer.count}</div>
            <button onClick={()=>{prints(20)}}>状态管理工具测试</button>
            <Button onClick={()=>{
                window.location.href="https://www.baidu.com"
            }}>跳转</Button>
        </div>

    );
}

/*
	1.mapStateToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapStateToProps用于传递状态
*/
function mapStateToProps(state:any){

    return {count:state.countReducer.count}
}

/*
	1.mapDispatchToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapDispatchToProps用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch:Function){
    return {
        incerment: ()=>dispatch(incerment()),
        async_count: ()=>dispatch(async_count())
    }
}


export default connect(mapStateToProps,mapDispatchToProps)(Count)
//简写 对象状态自己映射 操作方法react-redux帮我们映射
//export default connect(mapStateToProps,{incerment,async_count})(Count)

